<template>
  <div>
    <MdPreview ref="editorRef"
               :editorId="'p'+id"
               :theme="theme as Themes"
               :mdHeadingId="mdHeadingId"
               no-img-zoom-in
               :model-value="content"/>
  </div>

</template>

<script setup lang="ts">

import {MdPreview, Themes} from "md-editor-v3";
import 'md-editor-v3/lib/preview.css';
import {useAppStore} from "@/store/module/app";
import {storeToRefs} from "pinia";

const {theme} = storeToRefs(useAppStore())


defineProps({
  id: {
    type: String,
    default: ''
  },
  content: {
    type: String,
    default: ''
  }
})
const mdHeadingId = (_text:any, _level:any, index:any) => `heading-${index}`;

</script>

<style scoped>

</style>